<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>连续比例尺</title>

    <script type="text/javascript" src="d3.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="linear" class="clear"><span>n</span></div>
    <div id="linear-capped" class="clear">
        <span>1 &lt;= a*n + b &lt;= 20</span>
    </div>
    <div id="pow" class="clear"><span>n^2</span></div>
    <script type="text/javascript">
        var max = 11, data = [];
        for (var i = 1; i < max; ++i) {
            data.push(i);
        }


        var linear = d3.scaleLinear() // <-A
            .domain([1, 10]) // <-B
            .range([1, 10]); // <-C        
        var linearCapped = d3.scaleLinear()
            .domain([1, 10])
            .range([1, 20]); // <-D

        var pow = d3.scalePow().exponent(2); // <-E



        function render(data, scale, selector) {
            d3.select(selector).selectAll("div.cell")
                .data(data)
                .enter().append("div").classed("cell", true);

            d3.select(selector).selectAll("div.cell")
                .data(data)
                .exit().remove();

            d3.select(selector).selectAll("div.cell")
                .data(data)
                .style("display", "inline-block")
                .text(function (d) {
                    return d3.round(scale(d), 2);
                });
        }

        render(data, linear, "#linear");
        render(data, linearCapped, "#linear-capped");
        render(data, pow, "#pow");
    </script>
</body>

</html>
